/*
 * @Author: 张升 1562821455@qq.com
 * @Date: 2023-07-19 09:55:51
 * @LastEditors: zhangsheng zhangsheng@zhixueyun.com
 * @LastEditTime: 2024-11-13 01:44:31
 * @FilePath: \react-demo\src\views\testcss\styledComponent.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from "react";
import styled from 'styled-components'
const HomeWrapper = styled.div`
    font-size:50px; // 样式穿透
    color: red;
    span{
        color: orange;
        font-size: 30px;
        &.active{
            color: green;
        }
        &:hover{ // 伪类
            color: blue;
            font-size: 40px;
        }
        &::after{
            content: '我是伪元素';
        }
    }
    .flexbox{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100px;
        color: #fff;
        text-align: center;
        .flex1{
            flex: 1;
            background: red;
        }
        .flex2{
            flex: 2;
            background: green;
        }
        .flex3{
            flex: 3;
            background: blue;
        }
    }
`;
function StyleComponent() {
    return (
        <div className="outbox">
            <h1>标题</h1>
            <HomeWrapper>
                <h4>副标题</h4>
                <span title={'我是伪类'}>页签1</span>
                <span title={'我是伪类'} className="active">页签2</span>
                <span title={'我是伪类'}>页签3</span>
                <span title={'我是伪类'}>页签4</span>
                <div className='flexbox'>
                    <div className='flex1'>1</div>
                    <div className='flex2'>2</div>
                    <div className='flex3'>3</div>
                </div>
            </HomeWrapper>
        </div>
    )
}
export default StyleComponent;